import React from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    return (
        <div>
            <NavBar
                title="男科专题页面"
                onClickLeft={() => navigate(-1)}
            />
            <img src="../src/assets/200_02.jpg" alt="" style={{ width: '100%' }} />

            <h2 style={{ marginTop: "20px" }}>治阳痿早泄 名医推荐</h2>
            <div className={style.qq}>
                <div className={style.box}>
                    <img src="../src/assets/200_05.jpg" alt="" style={{ height: '100px' }} />
                    <div>
                        <p style={{ marginTop: '20px' }}><b style={{ color: '#17a2ff', fontSize: '18px' }}>叶海波</b> <span className={style.c1}>主治医师</span> </p> <br />
                        <p>温岭市第一人民医院泌尿外科门诊</p>
                    </div>
                </div>
                <hr />
                <p style={{ color: '#17a2ff' }}>显微镜下低位精索静脉曲张结扎术;男性不育、无精子症、严重少弱精子症的规范化＋个性化诊治(擅长男性激素调节促生精治疗)</p>
                <button className={style.btn}>0元问诊 &gt;</button>
            </div>

            <div>
                <div className={style.qq}>
                    <div className={style.box}>
                        <img src="../src/assets/200_08.jpg" alt="" style={{ height: '100px' }} />
                        <div>
                            <p style={{ marginTop: '20px' }}><b style={{ color: '#17a2ff', fontSize: '18px' }}>张山河</b> <span className={style.c1}>副主任医师</span> </p> <br />
                            <p>常德职业技术学院附属第一医院男科</p>
                        </div>
                    </div>
                    <hr />
                    <p style={{ color: '#17a2ff' }}>擅长中西结合治疗各类功能性障碍(阳痿早泄、性欲低下等)、男性功能司法鉴定专家。</p>
                    <button className={style.btn}>0元问诊 &gt;</button>
                </div>
                <div className={style.qq}>
                    <div className={style.box}>
                        <img src="../src/assets/200_05.jpg" alt="" style={{ height: '100px' }} />
                        <div>
                            <p style={{ marginTop: '20px' }}><b style={{ color: '#17a2ff', fontSize: '18px' }}>叶海波</b> <span className={style.c1}>主治医师</span> </p> <br />
                            <p>温岭市第一人民医院泌尿外科门诊</p>
                        </div>
                    </div>
                    <hr />
                    <p style={{ color: '#17a2ff' }}>显微镜下低位精索静脉曲张结扎术;男性不育、无精子症、严重少弱精子症的规范化＋个性化诊治(擅长男性激素调节促生精治疗)</p>
                    <button className={style.btn}>0元问诊 &gt;</button>
                </div>
                <div className={style.qq}>
                    <div className={style.box}>
                        <img src="../src/assets/200_08.jpg" alt="" style={{ height: '100px' }} />
                        <div>
                            <p style={{ marginTop: '20px' }}><b style={{ color: '#17a2ff', fontSize: '18px' }}>张山河</b> <span className={style.c1}>副主任医师</span> </p> <br />
                            <p>常德职业技术学院附属第一医院男科</p>
                        </div>
                    </div>
                    <hr />
                    <p style={{ color: '#17a2ff' }}>擅长中西结合治疗各类功能性障碍(阳痿早泄、性欲低下等)、男性功能司法鉴定专家。</p>
                    <button className={style.btn}>0元问诊 &gt;</button>
                </div>
            </div>

            <div>
                <div className={style.box2}>
                    <div>
                        <img src="../src/assets/201_03.jpg" alt="" />
                    </div>
                    <div>
                        <p style={{ paddingLeft: '40px' }}><b style={{ fontSize: '20px', color: '#17a2ff' }}>盐酸达泊汀片</b></p>
                        <p style={{ paddingLeft: '90px' }}><b style={{ color: '#df4d71', fontSize: '25px' }}>￥192</b></p>
                        <p style={{ paddingLeft: '90px' }}>30mg*3片</p>
                        <p><button className={style.btn2}>立即咨询医生</button></p>
                    </div>
                </div>
                <div className={style.box2}>
                    <div>
                        <img src="../src/assets/201_06.jpg" alt="" />
                    </div>
                    <div>
                        <p style={{ paddingLeft: '10px' }}><b style={{ fontSize: '20px', color: '#17a2ff' }}>枸橼酸西地那非片</b></p>
                        <p style={{ paddingLeft: '90px' }}><b style={{ color: '#df4d71', fontSize: '25px' }}>￥238</b></p>
                        <p style={{ paddingLeft: '90px' }}>50mg*10片</p>
                        <p><button className={style.btn2}>立即咨询医生</button></p>
                    </div>
                </div>
                <div className={style.box2}>
                    <div>
                        <img src="../src/assets/201_08.jpg" alt="" />
                    </div>
                    <div>
                        <p style={{ paddingLeft: '70px' }}><b style={{ fontSize: '20px', color: '#17a2ff' }}>他达拉非片</b></p>
                        <p style={{ paddingLeft: '90px' }}><b style={{ color: '#df4d71', fontSize: '25px' }}>￥699</b></p>
                        <p style={{ paddingLeft: '90px' }}>5mg*28片</p>
                        <p><button className={style.btn2}>立即咨询医生</button></p>
                    </div>
                </div>
                <div className={style.box2}>
                    <div>
                        <img src="../src/assets/201_10.jpg" alt="" />
                    </div>
                    <div>
                        <p style={{ paddingLeft: '30px' }}><b style={{ fontSize: '20px', color: '#17a2ff' }}>盐酸达泊西汀片</b></p>
                        <p style={{ paddingLeft: '90px' }}><b style={{ color: '#df4d71', fontSize: '25px' }}>￥33</b></p>
                        <p style={{ paddingLeft: '90px' }}>30mg*1片</p>
                        <p><button className={style.btn2}>立即咨询医生</button></p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Index
